<template>
  <div class="home" id="home">
    <my-swipe></my-swipe>
    <van-cell title="我的权限" icon="sign" v-if="member_role_id" />

    <van-grid :column-num="4" v-if="member_role_id">
      <van-grid-item v-if="member_role" icon="setting-o" text="代理授权" to="/agency">
        <template #icon>
          <van-image round width="50" height="50" :src="agency_img" />
        </template>
      </van-grid-item>
      <van-grid-item v-if="member_role" icon="setting-o" text="咨询卡授权" to="/card_agency">
        <template #icon>
          <van-image round width="50" height="50" :src="card_agency_img" />
        </template>
      </van-grid-item>
      <van-grid-item v-if="member_role_id" icon="setting-o" text="授权码" to="/publicity">
        <template #icon>
          <van-image round width="50" height="50" :src="qrcode_img" />
        </template>
      </van-grid-item>
      <van-grid-item v-if="member_role_id" icon="setting-o" text="发放咨询卡" to="/card_qrcode">
        <template #icon>
          <van-image round width="50" height="50" :src="card_img" />
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell title="我的服务" icon="smile-o" />
    <van-grid>
      <van-grid-item text="通讯录" to="/contact">
        <template #icon>
          <van-image round width="50" height="50" :src="contact_green" />
        </template>
      </van-grid-item>
      <van-grid-item text="企业合规调查" @click="onItemClick">
        <template #icon>
          <van-image round width="50" height="50" :src="invest_img" />
        </template>
      </van-grid-item>
      <van-grid-item text="律所位置" @click="onPositionClick">
        <template #icon>
          <van-image round width="50" height="50" :src="position_img" />
        </template>
      </van-grid-item>
      <van-grid-item text="计算器" to="/calculator">
        <template #icon>
          <van-image round width="50" height="50" :src="calculator_img" />
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell title="我的资料" icon="orders-o" />
    <van-grid :column-num="3">
      <van-grid-item icon="setting-o" text="我的咨询卡" to="/my_card_list">
        <template #icon>
          <van-image round width="50" height="50" :src="my_card_img" />
        </template>
      </van-grid-item>
      <van-grid-item text="私人律师" to="/private">
        <template #icon>
          <van-image round width="50" height="50" :src="private_img" />
        </template>
      </van-grid-item>
      <van-grid-item text="法律顾问" to="/adviser">
        <template #icon>
          <van-image round width="50" height="50" :src="adviser_img" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import agency from "@/assets/images/agency_blue.png";
import adviser from "@/assets/images/adviser_green.png";
import privates from "@/assets/images/private_green.png";
import qrcode from "@/assets/images/qrcode_blue.png";
import card_agency from "@/assets/images/card_agency_blue.png";
import card from "@/assets/images/card.png";
import my_card from "@/assets/images/my_card.png";
import contact_green from "@/assets/images/contact_green.png";
import invest_img from "@/assets/images/invest_green.png";
import calculator_img from "@/assets/images/calculator.png";
import position_img from "@/assets/images/position.png";

import { get_role } from "@/api/role";
import { get_jsapi_sign } from "@/api/utils";
import MySwipe from "@/components/MySwipe";

export default {
  name: "Home",
  components: {
    MySwipe,
  },
  data() {
    return {
      title: this.$route.meta.title || "",
      member_role: false,
      member_role_id: 0,
      images: [],
      agency_img: agency,
      adviser_img: adviser,
      private_img: privates,
      qrcode_img: qrcode,
      card_agency_img: card_agency,
      card_img: card,
      my_card_img: my_card,
      contact_green: contact_green,
      invest_img: invest_img,
      calculator_img: calculator_img,
      position_img: position_img,
    };
  },
  methods: {
    getUserRole() {
      let openid = localStorage.getItem("openid");
      get_role(openid)
        .then((res) => {
          console.log("getUserRole:", res);
          this.member_role_id = res.data.member_role;
          this.member_role =
            res.data.member_role === 1 || res.data.member_role == 3;
          if (res.data.member_role == null)
            sessionStorage.setItem("member_role", 0);
          else {
            sessionStorage.setItem("member_role", res.data.member_role);
            if (
              res.data.name == null ||
              res.data.name == "" ||
              res.data.telephone == null ||
              res.data.telephone == ""
            ) {
              this.$router.push("/users");
            }
          }
          console.log(this.member_role);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getJsApiSign() {
      // const url = encodeURIComponent(location.href.split("#")[0]);
      const url = location.href.split("#")[0];
      get_jsapi_sign(url)
        .then((res) => {
          // alert(JSON.stringify(res.data));
          const sign = res.data;
          this.$wx.config({
            debug: false,
            appId: sign.appId,
            timestamp: sign.timestamp,
            nonceStr: sign.nonceStr,
            signature: sign.signature,
            jsApiList: [
              "chooseWXPay",
              "openAddress",
              "openLocation",
              "getLocation",
            ],
          });
        })
        .catch((error) => {
          console.log(error.message);
        });
    },
    onItemClick() {
      if (this.member_role_id) {
        this.$router.push("/invest");
      } else {
        this.$toast.success("个人客户无法使用");
      }
    },
    onPositionClick() {
      this.$wx.openLocation({
        latitude: 40.74581,
        longitude: 120.848075,
        name: "辽宁靳世祥律师事务所",
        address: "辽宁省葫芦岛市连山区渤海街滨河大道21号楼, 电话:04292885551 手机:13514296302",
        scale: 18,
        infoUrl: "",
      });
    },
  },
  created() {
    this.getUserRole();
    this.getJsApiSign();
  },
};
</script>

<style scoped>
.van-col {
  text-align: center;
}
.grid_img {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  padding: 8px 8px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  background-color: red;
  margin-bottom: 8px;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0px solid #ebedf0;
}
</style>>


